<!DOCTYPE html>
<html lang="en">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta charset="UTF-8">
		<title>优购优品网</title>
		<!-- <link rel="stylesheet" href="../css/themes/css/core.css">
    <link rel="stylesheet" href="../css/themes/css/icon.css">
    <link rel="stylesheet" href="../css/themes/css/home.css"> -->
		<link rel="stylesheet" type="text/css" href="../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/local.css" />
		<script type="text/javascript" src="../script/jquery.js"></script>
		<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script src="../script/vant.min.js"></script>
		<script type="text/javascript" src="../script/fastclick.js"></script>
		<script type="text/javascript" src="../script/base.js"></script>

		<style>
			.h {
				background: #cd1b21;
				color: #fff;
				padding: 20px 0 20px 30px;
			}

			.address {
				overflow: hidden;
				border-radius: 8px;
				padding: 10px 0 0 10px;
				background: #fff;
				margin-bottom: 10px;
			}

			.a-c {
				float: left;
				width: 50px;
				height: 80px;
				line-height: 70px;
				text-align: center;
			}

			.a-c img {
				width: 28px;
				text-align: center;
			}

			.a-i {
				float: left;
				width: calc(100% - 50px);
			}

			.pl {
				margin-top: 10px;
				background: #fff;
				padding: 15px 0 10px 0;
			}

			.row {
				position: relative;
				margin-bottom: 10px;
			}

			.row .img {
				width: 100px;
				height: 80px;
				border-radius: 4px;
				overflow: hidden;
				/* padding: 0 10px; */
				margin-left: 10px;
			}

			.row .img img {
				width: 100%;
				height: 100%;
			}

			.row .desc {
				padding-right: 5px;
				padding-left: 10px;
			}

			.row .desc .title {
				font-size: 14px;
				line-height: 20px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.row .desc .title .hot {
				color: #fff;
				background: #cd1b21;
				font-size: 12px;
				border-radius: 2px;
				margin-right: 5px;
				vertical-align: middle;
			}

			.row .desc .sub-title {
				font-size: 12px;
				color: #969799;
				line-height: 20px;
				height: 40px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.row .desc .sub-title * {
				vertical-align: middle;
			}

			.sku {
				padding: 3px 0;
				font-size: 13px;
				color: #9e9e9e;
			}

			.price {
				text-align: right;
				font-size: 14px;
				padding-right: 15px;
				line-height: initial;
			}

			.pl .van-cell__value {
				text-align: right;
				color: #9e9e9e;
			}

			.pl .van-cell {
				padding: 2px 16px;
			}

			.pl .van-field__label,
			.pl .van-cell__title {
				font-weight: 500;
				color: #9e9e9e;
			}

			.dd {
				padding: 0 15px 20px 15px;
				font-size: 14px;
			}

			.di {
				padding: 10px 0 10px 0;
			}

			.di .van-cell__value {
				text-align: left;
			}

			.f .van-cell__title {
				font-size: 14px;
				color: #000;
			}

			.f .van-cell__value {
				font-size: 14px;
				color: #000;
			}

			.s.van-cell {
				padding: 10px 16px;
				background-color: #f9f9f9;
			}

			.s .van-cell__title {
				font-size: 14px;
				color: #000;
			}

			.s .van-cell__value {
				font-size: 15px;
				color: #cd1b21;
			}

			.l {
				display: inline-block;
				height: 16px;
				width: 2px;
				background: #cd1b21;
				vertical-align: text-top;
				margin-right: 5px;
			}

			.pd-b {
				padding: 10px;
				text-align: right;
			}

			.bottom_ {
				height: 50px;
				background: #f9f9f9;
			}

			.bottom_ button {
				margin-left: 10px;
			}

			.van-count-down {
				color: #fff;
				font-size: 12px;
				display: inline;
			}

			.s-i {
				overflow: hidden;
			}

			.s-i img {
				height: 80px;
			}

			.s-t {
				position: relative;
				height: 80px;
			}

			.s-t>div {
				position: absolute;
				top: 50%;
				-webkkit-transform: translate(0, -50%);
				transform: translate(0, -50%);
			}

			.red .van-action-sheet__subname {
				color: #cd1b21;
			}

			.g {
				font-size: 13px;
				color: #ed6a0c;
				/* padding-bottom: 10px; */
				padding: 0 10px 10px 10px;
			}

			.know {
				text-align: center;
				line-height: 40px;
				color: #1989fa;
				padding-bottom: 10px;
			}

			.content_ {
				padding: 20px;
				line-height: 24px;
				font-size: 14px;
				color: #323233;
			}

			.content_ img {
				width: 100%;
			}
		</style>


	</head>

	<body>
		<div id="app" v-cloak>
			<div class="init-full">
				<van-nav-bar class="head" title="订单详情" left-arrow @click-left="onClickLeft">
				</van-nav-bar>
				<div class="body-no-bottom">
					<div class="content" v-show="orderData">
						<div class="h">
							<van-row>
								<van-col span="14">
									<div class="s-t">
										<div v-if="orderData.OrderStatus == 1">
											<div>等待买家付款</div>
											<div style="font-size:12px;">剩<van-count-down :time="getColseDay()"
													format="DD 天 HH 时 mm 分"></van-count-down>自动关闭</div>
										</div>
										<div v-if="orderData.OrderStatus == 2">买家已付款</div>
										<div v-if="orderData.OrderStatus == 3">等待仓库发货</div>
										<div v-if="orderData.OrderStatus == 4 && orderData.CloseReason != '订单已退款完成'">
											交易关闭
										</div>
										<div v-if="orderData.OrderStatus == 5">交易完成</div>

										<div v-if="orderData.OrderStatus == 6">退款中</div>
										<div v-if="orderData.OrderStatus == 4 && orderData.CloseReason == '订单已退款完成'">
											<div>退款成功</div>
											<div style="font-size:12px;">
												{{orderData.UpdateDate.split('.')[0].replace(/T/,' ')}}
											</div>
										</div>
										<div v-if="orderData.OrderStatus == 18">退款失败</div>
									</div>
								</van-col>
								<van-col span="10">
									<div class="s-i">
										<img src="../image/ddmjfk.png" v-if="orderData.OrderStatus == 1" />
										<img src="../image/mjyfk.png" v-if="orderData.OrderStatus == 2" />
										<img src="../image/ddckfh.png" v-if="orderData.OrderStatus == 3" />
										<img src="../image/jyygb.png" v-if="orderData.OrderStatus == 4" />
										<img src="../image/jywc.png" v-if="orderData.OrderStatus == 5" />
									</div>
								</van-col>
							</van-row>
						</div>
						<div class="address">
							<div class="a-c">
								<img src="../image/shdz.png" />
							</div>
							<div class="a-i">
								<van-cell center>
									<div>{{orderData.ShipTo}}&nbsp;&nbsp;{{orderData.TelPhone}}</div>
									<div style="color: #9e9e9e;">{{orderData.Address}}</div>
								</van-cell>
							</div>
						</div>
						<div class="pl" style="padding-bottom: 0;">
							<div class="row flex-box" v-for="item in orderData.node">
								<div class="img">
									<img v-lazy="shoppingMallServerIP + item.ThumbnailsUrl" />
								</div>
								<div class="flex-main desc">
									<div class="title">{{item.ProductName}}</div>
									<div class="sku">{{item.SKU}}</div>
								</div>
								<div class="price">
									<div>￥&nbsp;<span style="font-size: 15px;">{{item.ItemListPrice}}</span></div>
									<div style="color:#9e9e9e">x{{item.ShipmentQuantity}}</div>
								</div>
							</div>
							<div class="g" v-if="gifts.length">礼品清单</div>
							<div class="row flex-box" v-for="item in gifts">
								<div class="img">
									<img v-lazy="shoppingMallServerIP + item.ThumbnailsUrl" />
								</div>
								<div class="flex-main desc">
									<div class="title">{{item.GiftName}}</div>
									<!-- <div class="sku">{{item.SKU}}</div> -->
								</div>
								<div class="price">
									<!-- <div>￥&nbsp;<span style="font-size: 15px;">{{item.ItemListPrice}}</span></div> -->
									<div style="color:#9e9e9e">x{{item.Quantity}}</div>
								</div>
							</div>

							<div>
								<van-cell-group :border="false">
									<van-cell title="商品总价" :border="false" :value="'￥' + orderData.Amount"></van-cell>
									<van-cell title="运费" :border="false"
										:value="orderData.Freight == 0?'包邮':'￥' + orderData.Freight">
									</van-cell>
									<van-cell class="f" title="订单总价" :border="false"
										:value="'￥' + (orderData.Amount+orderData.Freight)">
									</van-cell>
									<van-cell class="s" title="实付款" :border="false" :value="'￥' + orderData.OrderTotal">
									</van-cell>
									<van-cell class="s" title="退款金额" :border="false"
										v-if="orderData.OrderStatus == 4 && orderData.CloseReason == '订单已退款完成'"
										:value="'￥' + orderData.RefundAmount">
									</van-cell>
									<van-cell class="s" title="订单备注" :border="false" :value="orderData.Remark">
									</van-cell>
									<van-cell class="s" title="商家备注" :border="false"
										v-if="orderData.OrderStatus == 4 && orderData.CloseReason == '订单已退款完成'"
										:value="orderData.RefundRemark">
									</van-cell>
								</van-cell-group>
							</div>
						</div>
						<div class="pl di">
							<div class="dd"><span class="l"></span> 订单信息</div>
							<div>
								<van-cell-group :border="false">
									<van-cell title="积分" :border="false" :value="'获得' + orderData.OrderPoint + '点积分'"
										v-if="(orderData.OrderStatus == 4 && orderData.CloseReason != '订单已退款完成') || (orderData.OrderStatus != 4 && orderData.OrderStatus != 6)">
									</van-cell>
									<van-cell title="订单编号" :border="false" :value="orderData.OrderId"></van-cell>
									<van-cell title="付款方式" :border="false" :value="orderData.PaymentType"
										v-if="orderData.PaymentType"></van-cell>
									<van-cell title="创建时间" :border="false"
										:value="getDate(orderData.OrderDate)"></van-cell>
									<van-cell title="付款时间" :border="false" :value="getDate(orderData.PayDate)"
										v-if="orderData.PayDate"></van-cell>
									<van-cell title="发货时间" :border="false" :value="getDate(orderData.ShippingDate)"
										v-if="orderData.ShippingDate"></van-cell>
									<van-cell title="成交时间" :border="false" :value="getDate(orderData.FinishDate)"
										v-if="orderData.FinishDate"></van-cell>
								</van-cell-group>
							</div>
						</div>

					</div>
					<van-loading v-if="showLoading" />
				</div>
				<div class="bottom_" v-if="orderData.OrderStatus != 4 && orderData.OrderStatus != 6">
					<div class="pd-b">
						<van-button type="warning" round size="small" :loading="ifConfirm"
							v-if="orderData.OrderStatus == 1" @click="changeShowPageType">付款
						</van-button>
						<van-button type="warning" round size="small" v-if="orderData.OrderStatus == 2"
							@click="refund">退款
						</van-button>
						<van-button type="default" round size="small" v-if="orderData.OrderStatus == 3"
							@click.stop="openLogistics">查看物流
						</van-button>
						<van-button type="warning" round size="small" :loading="ifConfirm"
							v-if="orderData.OrderStatus == 3" @click="confirmReceipt">确认收货
						</van-button>
						<van-button type="warning" round size="small" :loading="ifConfirm"
							v-if="orderData.OrderStatus == 5 && orderData.isReview <= 0" @click.stop="evaluateOrder">评价
						</van-button>

					</div>
				</div>
			</div>
			<van-popup v-model="showRefund" position="bottom" :style="{ height: '30%' }">
				<van-field v-model="refundData.refundReason" rows="1" autosize label="退款原因" type="textarea"
					placeholder="请输入退款原因"></van-field>
				<van-field v-model="refundData.remark" rows="1" autosize label="备注" type="textarea" placeholder="请输入备注">
				</van-field>
				<div class="btn-padding">
					<van-button type="primary" block :loading="ifConfirm" loading-text="发起退款中..."
						@click="refundConfirm">退款
					</van-button>
				</div>
			</van-popup>

			<van-action-sheet v-model="showPageType" :actions="pageTypes" description="支付方式选择"
				@cancel="showPageType = false;" @select="payMoney"></van-action-sheet>

			<van-popup v-model="isPayByCode" :style="{ width: '90%' }" round @click-overlay="payByCodeSuccess">
				<div class="content_">
					<div class="sub_" style="text-align: center;padding-bottom: 10px;">请用微信扫描以下二维码进行付款</div>
					<img :src="payImg" />
				</div>
				<div class="know" @click="payByCodeSuccess">支付完成</div>
			</van-popup>
		</div>
	</body>

	<!-- 调用 uniapp webview 的 api ，记得需要写在 body 标签下面 -->
	<script src="../../../assets/script/uni.webview.1.5.4.js"></script>
	<script type="text/javascript">
		var vm;
		//$('.init-full').show();

		var userInfo = FLD.getUserInfo();

		var OrderId = window.localStorage.getItem('OrderId')

		// var aliPayPlus = api.require('aliPayPlus');
		// var wxPay = api.require('wxPay');


		Vue.use(vant.Lazyload, {
			loading: '../image/no.png',
			error: '../image/no.png'
		});



		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				ifConfirm: false,
				showRefund: false,
				showPageType: false,
				serverIP: 'http://' + FLD.serverIP,
				payImg: '',
				isPayByCode: false,
				pageTypes: [{
					name: '支付宝'
				}, {
					name: '微信'
				}, {
					name: '余额支付',
					subname: '',
					className: ''
				}, {
					name: '微信二维码支付'
				}],
				shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
				orderData: '',
				refundData: {
					remark: '',
					refundReason: ''
				},
				closeDay: 0,
				gifts: []
			},
			created: function() {
				var that = this;
				that.getBaseColseDay();
				that.getOrderData();
			},
			methods: {
				getBaseColseDay() {
					var that = this;
					FLD.ajax('sp_getParams', {
						key: 'CloseOrderDays'
					}, function(res) {
						that.closeDay = parseInt(res.ds[0].Value);
					})
				},
				getColseDay() {
					var that = this;
					if (that.closeDay && that.orderData) {
						var time = that.closeDay * 24 * 60 * 60 * 1000 - (new Date().getTime() - new Date(that
							.orderData.OrderDate).getTime());
						return time;
					} else {
						return 0;
					}
				},
				getOrderData() {
					var that = this;
					that.showLoading = true;
					FLD.ajax('sp_getOrderDetail', {
						orderId: OrderId
					}, function(res) {
						that.showLoading = false;
						res.ds[0].node = res.ds1;
						that.orderData = res.ds[0];
						that.gifts = res.ds2;
					})
				},
				getDate(d) {
					if (d) {
						return d.split('.')[0].replace('T', ' ');
					}

				},
				refund() {
					var that = this;
					that.showRefund = true;
				},
				refundConfirm() {
					var that = this;
					that.showRefund = false;
					that.ifConfirm = true;
					var obj = {
						orderId: that.orderData.OrderId,
						remark: that.refundData.remark,
						refundReason: that.refundData.refundReason
					}
					FLD.ajax('sp_orderRefund', obj, function(res) {
						that.ifConfirm = false;
						if (res.ds[0].status == 200) {
							that.orderData.OrderStatus = 6;
							api.sendEvent({
								name: 'refreshOrderList'
							});
							api.sendEvent({
								name: 'refreshAboutUser'
							});
							layer.open({
								content: '退款发起成功!请耐心等待商家处理',
								skin: 'msg',
								time: 2
							});
						} else {
							layer.open({
								content: res.ds[0].msg,
								skin: 'msg',
								time: 2
							});
						}
					})
				},
				evaluateOrder() {
					var that = this;
					api.openWin({
						name: 'evaluateOrder',
						url: 'evaluateOrder.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							goodsEvaluated: that.orderData.node
						}
					})
				},
				payMoney(item, index) {
					var that = this;
					that.showPageType = false;
					if (index == 0) {
						var obj = {
							orderNo: that.orderData.OrderId,
							PayType: 1
						}
						FLD.nativeRequest_shopPay('pay', obj, function(res) {
							aliPayPlus.payOrder({
								orderInfo: res
							}, function(ret, err) {
								that.getOrderData();
								api.sendEvent({
									name: 'refreshOrderList'
								});
								api.sendEvent({
									name: 'refreshAboutUser'
								});

							});
						})
					} else if (index == 1) {
						var obj = {
							orderNo: that.orderData.OrderId,
							PayType: 2
						}
						FLD.nativeRequest_shopPay('pay', obj, function(res) {

							var data = JSON.parse(res);
							var myDate = new Date();
							var now = Date.parse(new Date()) / 1000;

							var stringA = 'appid=' + data.appid + '&noncestr=' + data.nonce_str +
								'&package=Sign=WXPay' + '&partnerid=' + data.mch_id + '&prepayid=' +
								data.prepay_id + '&timestamp=' + now +
								'&key=fldabcdefg123456789erfgiht56jh9f';
							var signature = api.require('signature');
							signature.md5({
								data: stringA
							}, function(ret, err) {
								if (ret.status) {
									var sign = ret.value.toUpperCase();
									wxPay.payOrder({
										apiKey: data.appid,
										orderId: data.prepay_id,
										mchId: data.mch_id,
										nonceStr: data.nonce_str,
										timeStamp: now,
										package: 'Sign=WXPay',
										sign: sign
									}, function(ret, err) {
										that.getOrderData();
										api.sendEvent({
											name: 'refreshOrderList'
										});
										api.sendEvent({
											name: 'refreshAboutUser'
										});
									});

								}
							});


						})
					} else if (index == 2) {
						if (that.pageTypes[2].className) {
							api.openWin({
								name: 'rechargeBalance',
								url: 'rechargeBalance.html',
								reload: true,
								slidBackEnabled: false
							})
						} else {
							var obj = {
								orderId: that.orderData.OrderId
							}
							FLD.ajax('sp_balanceOrderPayFinish', obj, function(res) {
								if (res.ds && res.ds[0] && res.ds[0].status == 500) {
									layer.open({
										content: res.ds[0].msg,
										skin: 'msg',
										time: 2
									});
								} else {
									layer.open({
										content: '付款成功',
										skin: 'msg',
										time: 2
									});
									that.getOrderData();
									api.sendEvent({
										name: 'refreshOrderList'
									});
									api.sendEvent({
										name: 'refreshAboutUser'
									});
								}
							})
						}
					} else {
						var obj = {
							orderNo: that.orderData.OrderId,
							PayType: 3
						}
						FLD.nativeRequest_shopPay('pay', obj, function(res) {
							that.payImg = 'data:image/png;base64,' + res;
							that.isPayByCode = true;
						})
					}
				},
				payByCodeSuccess() {
					var that = this;
					that.isPayByCode = false;
					that.getOrderData();
					api.sendEvent({
						name: 'refreshOrderList'
					});
					api.sendEvent({
						name: 'refreshAboutUser'
					});
				},
				confirmReceipt() {
					var that = this;
					that.$dialog.confirm({
						title: '提示',
						message: '是否确认收货?'
					}).then(() => {
						FLD.ajax('sp_submitOrder', {
							orderId: that.orderData.OrderId
						}, function(res) {
							layer.open({
								content: '商品确认收货成功!',
								skin: 'msg',
								time: 2
							});
							that.getOrderData();
							api.sendEvent({
								name: 'refreshOrderList'
							});
							api.sendEvent({
								name: 'refreshAboutUser'
							});
						})
					}).catch(() => {

					});
				},
				changeShowPageType() {
					var that = this;

					// if (that.orderData.PaymentTypeId == 0) {
					that.ifConfirm = true;
					FLD.ajax('sp_getMemberInfo', {}, function(res) {
						that.ifConfirm = false;
						window.localStorage.setItem('userInfo', JSON.stringify(res.ds[0]));
						that.pageTypes[2].subname = '当前余额￥' + FLD.getUserInfo().Balance;
						that.pageTypes[2].className = (FLD.getUserInfo().Balance + FLD.getUserInfo()
							.Quota - that.orderData.OrderTotal) < 0 ? 'red' : ''
						that.showPageType = true;
					})
					// } else {
					//     //线下支付付款结束全流程
					// }


				},
				openLogistics() {
					var that = this;
					api.openWin({
						name: 'logistics',
						url: 'logistics.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							OrderId: that.orderData.OrderId
						}
					})
				},
				onClickLeft() {
					window.localStorage.removeItem('OrderId');
					window.history.back();
				}
			}
		})
	</script>

</html>